<template>
	<div class="professional-cont">
		<div class="professional-bg">
			<img src="@/static/professional/bg-professional.png" class="bg-img" />
			<div class="title">
				<div class="cn">
					专业分类
				</div>
				<div class="en">
					Professional Classification
				</div>
			</div>
		</div>

		<div class="list" v-if="courseList.length">
			<div class="list-item" v-for="course in courseList" :key="course.id" @click="checkCourseInfo(course)">
				<img src="@/static/professional/icon-course.png" class="icon-book" />
				<div class="course-title">
					<div class="title">
						{{course.Title}}
					</div>
				</div>
			</div>
		</div>
		<!-- <no-data v-else></no-data> -->
	</div>
</template>

<script>
// import { getMajorList } from "@/api/major.js";
// import noData from "@/components/no-data.vue";
export default {
	components: {
		// noData,
	},
	data() {
		return {
			courseList: [],
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.$toast.loading({
				message: "加载中...",
				forbidClick: true,
				duration: 0,
			});
			this.$api.major
				.majorList()
				.then((res) => {
					window.console.log(res);
					if (res.list && res.list.length > 0) {
						this.courseList = res.list;
					}
				})
				.finally(() => {
					this.$toast.clear();
				});
		},
		checkCourseInfo(course) {
			window.console.log(course);
			this.$router.push({
				name: "batchList",
				params: {},
			});
			localStorage.setItem("activeSortId", course.Id);
		},
	},
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
